<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>角色列表</title>
  <link rel="stylesheet" href="../../../component/pear/css/pear.css">
  <link rel="stylesheet" href="../../../admin/css/dimples.css">
  <link rel="icon" href="../../../admin/images/favicon.ico" type="image/x-icon"/>
</head>

<body class="pear-container">
<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
          <input type="text" name="roleName" placeholder="" class="layui-input">
        </div>
        <label class="layui-form-label">角色标识</label>
        <div class="layui-input-inline">
          <input type="text" name="roleCode" placeholder="" class="layui-input">
        </div>
        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
          <i class="layui-icon layui-icon-search"></i>
          查询
        </button>
        <button type="reset" class="pear-btn pear-btn-md">
          <i class="layui-icon layui-icon-refresh"></i>
          重置
        </button>
      </div>
    </form>
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="role-table" lay-filter="role-table"></table>
  </div>
</div>
</body>

<script type="text/html" id="role-toolbar">
  <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" {{checkPerms('role:add')}}>
  <i class="layui-icon layui-icon-add-1"></i>
  新增
  </button>
  <button class="pear-btn pear-btn-md" lay-event="batchRemove" {{checkPerms('role:delete')}}>
  <i class="layui-icon layui-icon-delete"></i>
  删除
  </button>
</script>

<script type="text/html" id="role-bar">

  <span {{noPerms('role:delete','role:edit','role:auth')}} >
  <span class="layui-badge-dot dimples-bg-orange"></span>
  无权限
  </span>

  <a lay-event="edit" {{checkPerms('role:edit')}}>
  <i class="layui-icon layui-icon-set dimples-edit-area dimples-blue"></i>
  </a>
  <a lay-event="power" {{checkPerms('role:auth')}}>
  <i class="layui-icon layui-icon-vercode dimples-edit-area dimples-orange"></i>
  </a>
  <a lay-event="remove" {{checkPerms('role:delete')}}>
  <i class="layui-icon dimples-edit-area dimples-red">&#xe7f9;</i>
  </a>
</script>

<!-- 依 赖 脚 本 -->
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../component/pear/dimples.js"></script>
<script>
  layui.use(['table', 'form', 'jquery', 'popup', 'common', 'ajax', 'loading', 'open'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let popup = layui.popup;
    let common = layui.common;
    let ajax = layui.ajax;
    let loading = layui.loading;
    let open = layui.open;

    let MODULE_PATH = "/system/role/";

    let cols = [
      [
        {type: 'checkbox'},
        {title: '角色编号', field: 'roleId', align: 'center'},
        {title: '角色代码', field: 'roleCode', align: 'center'},
        {title: '角色名称', field: 'roleName', align: 'center', width: 100},
        {title: '描述', field: 'remark', align: 'center'},
        {title: '创建时间', field: 'createTime', align: 'center'},
        {title: '操作', toolbar: '#role-bar', align: 'center', width: 195}
      ]
    ]

    table.render({
      elem: '#role-table',
      url: BASE_URL + '/system/role',
      headers: {
        Authorization: getToken()
      },
      request: {
        pageName: 'pageNumber', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: '#role-toolbar',
      response: {
        statusCode: 200 //规定成功的状态码，默认：0
      },
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    });

    table.on('tool(role-table)', function (obj) {
      if (obj.event === 'remove') {
        window.remove(obj);
      } else if (obj.event === 'edit') {
        window.edit(obj);
      } else if (obj.event === 'power') {
        window.power(obj);
      }
    });

    table.on('toolbar(role-table)', function (obj) {
      if (obj.event === 'add') {
        window.add();
      } else if (obj.event === 'refresh') {
        window.refresh();
      } else if (obj.event === 'batchRemove') {
        window.batchRemove(obj);
      }
    });

    form.on('submit(role-query)', function (data) {
      table.reload('role-table', {where: data.field})
      return false;
    });

    window.add = function () {
      open.iframe('新增', 'add.html');
    }

    window.power = function (obj) {
      open.iframe('授权', 'power.html?roleId=' + obj.data["roleId"]);
    }

    window.edit = function (obj) {
      open.iframe('修改', 'edit.html?roleId=' + obj.data['roleId'])
    }

    window.remove = function (obj) {
      layer.confirm('确定要删除该角色', {icon: 3, title: '提示'}, function (index) {
        layer.close(index);
        loading.Load('1', '');
        ajax.send('/system/role/' + obj.data['roleId'], {
          type: 'DELETE'
        }, function (result) {
          layer.msg(result.msg, {icon: 1, time: 1000}, function () {
            obj.del();
          });
        })
      });
    }

    window.batchRemove = function (obj) {
      let ids = common.checkField(obj, 'roleId');
      if (common.isEmpty(ids)) {
        popup.warning("未选中数据");
        return false;
      }
      layer.confirm('确定要删除选中角色', {icon: 3, title: '提示'}, function (index) {
        layer.close(index);
        loading.Load('1', '');
        ajax.send('/system/role/batch/' + ids, {
          type: 'DELETE',
        }, function (result) {
          popup.success(result.msg, function () {
            table.reload('role-table');
          });
        });
      });
    }

    window.refresh = function () {
      table.reload('role-table');
    }
  })
</script>

</html>